<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>大屏可视化项目-1</title>
  <script>
    // 浏览器的宽度和高度
    const clientWidth = document.documentElement.clientWidth
    const clientHeight = document.documentElement.clientHeight
    console.log(clientWidth / clientHeight)
    // 屏幕宽度
    window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth
    // 屏幕高度
    let pageHeight = pageWidth / (16 / 9)
    let string = `
      <style>
        html{
          font-size:${pageWidth / 100}px
        }   
      </style>
    `
    document.write(string)
  </script>
</head>

<body>
  <div id="root"></div>
  <script>
    let root = document.querySelector('#root')
    // root.style.width = pageWidth + 'px'
    root.style.height = pageHeight + 'px'
    root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
  </script>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>